<template>
  <div id="projectDecom">
    <!--add_project-->
    <el-form :model="ruleForm"
             status-icon
             ref="ruleForm"
             label-width="70px"
             class="ruleForm">
      <el-row class="row-style">
        <el-row :gutter="24">
          <el-col :span="5"
                  class="head-style">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="downla">
                  <el-tree :data="data1"
                           class="mid-tree-style"
                           node-key="id"
                           default-expand-all
                           highlight-current
                           :props="defaultProps"
                           :expand-on-click-node="true"
                           @node-click="handleNodeClick">
                  </el-tree>
                </div>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="19"
                  class="mid-str-border">
            <el-row :gutter="24">
              <el-col :span="24"
                      type="flex"
                      flex-direction="row"
                      justify-content="around-space">
                <el-col :span="12"
                        class="col-12-style">
                  <el-button @click="relativePic"
                             type="primary">项目分解</el-button>
                  <el-button type="success">WBS模板</el-button>
                  <el-button type="primary">导入WBS</el-button>

                </el-col>
                <el-col :span="2">
                  &nbsp;&nbsp;
                </el-col>
                <el-col :span="10"
                        class="col-10-style">
                  <ul type="flex"
                      flex-direction="row"
                      justify-content="space-around">
                    <li class="col-ul-li">
                      <el-col :span="22"
                              class="head-box">
                        <el-col :span="2"
                                style="float:left;">
                          <span class="no-install">&nbsp;</span>
                        </el-col>
                        <el-col :span="16"
                                class="no-install-next">
                          未安装
                        </el-col>
                      </el-col>
                    </li>
                    <li class="col-ul-li">
                      <el-col :span="22"
                              class="head-installed">
                        <el-col :span="2"
                                style="float:left;">
                          <span class="col-install">&nbsp;</span>
                        </el-col>
                        <el-col :span="16"
                                class="col-install-next">
                          在安装
                        </el-col>
                      </el-col>
                    </li>
                    <li class="col-ul-li">
                      <el-col :span="22"
                              class="head-installed-old">
                        <el-col :span="2"
                                style="float:left;">
                          <span class="col-success">&nbsp;</span>
                        </el-col>
                        <el-col :span="16"
                                class="col-success-next">
                          已安装
                        </el-col>
                      </el-col>
                    </li>
                  </ul>
                </el-col>
              </el-col>
              <el-col>
                <div class="div-style">
                  <div class="div-style-next">
                    <ul class="div-ul">楼层</ul>
                    <ul class="mid-left-desc"></ul>
                    <ul class="tree_num"
                        style="width:30px;">
                      <li class="div-ul-li"
                          v-for="(item,i) in axis_y"
                          :key="i">{{item}}</li>
                    </ul>
                  </div>
                  <div class="mid-right-slid"
                       @mouseover="oncup">
                    <div class="onp-div">
                      <div class="onp-div-next">
                        <el-col :span='24'>
                          <ul style="margin-top:30px"></ul>
                          <ul class="mid-floor-size"
                              v-for="(item,i) in floor_arr"
                              :key="i">
                            <div class="clear">
                              <li>
                                <div class="mid-ul-back"
                                     :style="contentStyleObj">
                                  <ul class="mid-ul-size-more">
                                    <span v-for="(item1,i1) in item.layer"
                                          :key="i1"
                                          @mouseover="onp(item1.id,item1.is_paper_check_point)">
                                      <el-tooltip class="mid-floor-tool"
                                                  effect="light"
                                                  placement="top">
                                        <div :key="i1"
                                             class="mid-tool-div"
                                             slot="content"
                                             v-html="resolve_desc"></div>
                                        <li v-for="(item2,num) in item.layer"
                                            :key="num"
                                            :class="{ 'btnActive':item1.id == current}"
                                            :style="{'background':item1.is_paper_check_point=='0' ? 'rgba(234,237,241,1)' : item1.is_paper_check_point =='1' ? 'rgba(250,173,20,1)' : 'rgba(24,144,255,1)'}"
                                            @click="onchangesj(item1.id)">
                                          <p>&nbsp;</p>
                                        </li>
                                      </el-tooltip>
                                    </span>
                                  </ul>
                                </div>
                                <p class="p-style">{{item.desc}}</p>
                              </li>
                            </div>
                          </ul>
                        </el-col>
                      </div>
                      <div class="mid-size">
                        <el-col :span="24">
                          <el-col class="col-lh-top">
                            <ul id="lh1">
                              <li v-for="(item,i) in dw_work"
                                  :key="i"
                                  :style="objstyle[i]">{{item.desc}}</li>
                            </ul>
                          </el-col>
                        </el-col>
                        <el-col :span="24"
                                style="overflow-x:auto;">
                          <el-col class="col-lh-top">
                            <ul class="lh2">
                              <li v-for="(item,i) in dx_work"
                                  :key="i"
                                  :style="objstyle1[i]">{{item.desc}}</li>
                            </ul>
                          </el-col>
                        </el-col>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20"
                    style="overflow:hidden;"
                    v-if="oncondition">
              <el-col :span="24"
                      style="overflow-x:hidden;">
                <br />
                <br />

                <el-row :gutter="20">
                  <br />
                  <el-col :span="24"
                          class="space-col">
                    &nbsp;
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="20"
                            :offset="4"
                            style="margin-top:10px;">
                      <el-col :span="5">
                        <el-select v-model="value"
                                   placeholder="请选择">
                          <el-option v-for="item in options"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="5">
                        <el-select v-model="value"
                                   placeholder="请选择">
                          <el-option v-for="item in options"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3">
                        <el-select v-model="value"
                                   placeholder="请选择">
                          <el-option v-for="item in options"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3">
                        <el-select v-model="value"
                                   style="width:100%;"
                                   placeholder="请选择">
                          <el-option v-for="item in options"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="5">
                        <el-input v-model="value"
                                  style="width:100%!important;"
                                  placeholder="构件编号">

                        </el-input>
                      </el-col>
                      <el-col :span="3"
                              class="col-3-style">
                        <el-button type="primary"
                                   style="width:100%!important;">查询</el-button>
                      </el-col>
                    </el-col>
                  </el-col>

                  <el-col :span="24"
                          class="col-table-top">
                    <el-table :data="tableData"
                              height="310"
                              border
                              :header-cell-style="{background:'#f5f5f5'}">
                      <el-table-column prop="componNo"
                                       label="构建编号"
                                       align="center"
                                       show-overflow-tooltip
                                       width="100px">
                      </el-table-column>
                      <el-table-column prop="componType"
                                       label="构件类型"
                                       align="center"
                                       show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column prop="relativeProject"
                                       label="所属项目"
                                       align="center"
                                       width="100px"
                                       show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column prop="proStatus"
                                       label="工序状态"
                                       align="center"
                                       show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column prop="componDustry"
                                       label="加工厂"
                                       align="center"
                                       show-overflow-tooltip>
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="24"
                          class="col-pagi-style">
                    <el-pagination @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[20,50,100,150,200]"
                                   :page-size="pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 项目分解弹窗 -->
        <el-dialog title="项目分解"
                   :visible.sync="projectVisible"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   width="70%">
          <el-row>
            <el-col :span='8'>
              <ProjectTree :curMenu.sync="menuNo"></ProjectTree>
            </el-col>
            <el-col :span='16'>
              <el-transfer style="text-align: left; display: inline-block"
                           v-model="valueArr"
                           :filterable='false'
                           :left-default-checked="[]"
                           :right-default-checked="[1]"
                           :render-content="renderFunc"
                           :titles="['已分配', '未分配']"
                           :button-texts="['添加', '移除']"
                           :format="{
                              noChecked: '${total}',
                              hasChecked: '${checked}/${total}'
                            }"
                           @change="handleChange"
                           :data="data">
              </el-transfer>
            </el-col>
          </el-row>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="projectVisible= false">取 消</el-button>
            <el-button type="primary"
                       @click="projectVisible= false">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { menuManageApi, permissionManageApi } from '@/services/SystemSetting'
import { projectDecomApi } from '@/services/ProjectCenter'
import ProjectTree from '../../ProjectCenter/ProjectDecom/projectTree'
export default {
  components: {
    ProjectTree,
  },
  data () {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
        });
      }
      return data;
    };
    return {
      data: generateData(),
      valueArr: [],
      renderFunc (h, option) {
        return <span>{option.key} - {option.label}</span>;
      },
      current: '',
      value: '',
      options: [],
      jobData: [],
      conarr: [],
      oncondition: true,
      onpoint: false,
      resolve_desc: '1#楼 1层' + "<br><br>" + "<ul><li><span>加工制作：</span>" + "<span>" + 0 + "</span>" + "</li>" + "<li><span>工厂堆放：</span>" + "<span>" + 5 + "</span>" + "</li>" + "</li>" + "<li><span>道路运输：</span>" + "<span>" + 2 + "</span>" + "</li>" + "<li><span>现场堆放：</span>" + "<span>" + 2 + "</span>" + "</li>" + "<li><span>现场安装：</span>" + "<span>" + 2 + "</span>" + "</li>" + "<li><span>安装完成：</span>" + "<span>" + 2 + "</span>" + "</li>" + "</ul>",
      total_count: '',
      currentPage: 0,
      pagesize: 20,
      total: 0,
      objstyle: [],
      contentStyleObj: {
        height: ''
      },
      objstyle1: [],
      objstyleheight: {
        height: ''
      },
      paper_id: '',
      paper_id1: '',
      axis_y: ["5", "4", "3", "2", "1"],
      floor_arr: [
        {
          desc: "1#",
          grade: 3,
          id: "148",
          layer: [
            {
              desc: "1",
              grade: 4,
              id: "155",
              is_paper_check_point: 2,
              pid: "148",
              project_id: "7",
              type_id: "4"
            },
            {
              desc: "2",
              grade: 4,
              id: "156",
              is_paper_check_point: 2,
              pid: "148",
              project_id: "7",
              type_id: "4",
            },
            {
              desc: "3",
              grade: 4,
              id: "1037",
              is_paper_check_point: 1,
              pid: "148",
              project_id: "7",
              type_id: "4",
            },
            {
              desc: "4",
              grade: 4,
              id: "1041",
              is_paper_check_point: 1,
              pid: "148",
              project_id: "7",
              type_id: "4",
            },
            {
              desc: "5",
              grade: 5,
              id: "1045",
              is_paper_check_point: 1,
              pid: "145",
              project_id: "8",
              type_id: "4",
            }
          ],
          layer_max: "90",
          layer_min: "1",
          layer_num: 10,
          pid: "146",
          project_id: "7",
          type_id: "3",
        },
      ],
      dw_work: [
        {
          desc: "仓库区",
          floor_num: 3,
          grade: 2,
          id: "146",
          pid: "145",
          project_id: "7",
          type_id: "2",
        },
        {
          desc: "火药区",
          floor_num: 4,
          grade: 2,
          id: "147",
          pid: "145",
          project_id: "7",
          type_id: "2",
        }
      ],
      dx_work: [
        {
          desc: "西一片区",
          floor_num: 7,
          grade: 1,
          id: "145",
          num_dwgc_num: 3,
          pid: "0",
          project_id: "7",
          type_id: "1",
        }
      ],
      tableData: [
        {
          componNo: '/0212/PC-B/PCB-08/E-F*5-6/1',
          id: '1',
          componType: '叠合板',
          relativeProject: '浙江师范大学行知学院',
          proStatus: '加工制作',
          componDustry: '浙江金立圣住宅工业科技',
        }
      ],
      form: {
        job: '',
        startendtime: '',
        result: '',
        check_item_id: '',
        start_time: '',
        end_time: '',
      },
      ruleForm: {
        name: '',
        alias: '',
        address: '',
        category: '',
        purpose: '',
        cost: '',
        area: '',
        type: '',
        type1: '',
        type2: '',
        schedule: '',
        start_time: '',
        work: '',
        construction: '',
        design: '',
        supervision: '',
        department_id: '',
        description: '',
        pic_one_url: '',
        pic_two_url: '',
      },
      data1: [
        {
          childrens: [
            {
              childrens: [
                {
                  childrens: [
                    {
                      desc: "测试车试的",
                      id: "155",
                      pid: "148",
                      project_id: "7",
                      type_id: "4",
                    },
                    {
                      desc: "大江东",
                      id: "156",
                      pid: "148",
                      project_id: "7",
                      type_id: "4",
                    },
                    {
                      desc: "测试项",
                      id: "1037",
                      pid: "148",
                      project_id: "7",
                      type_id: "4",
                    }
                  ],
                  desc: "测试",
                  id: "148",
                  pid: "146",
                  project_id: "7",
                  type_id: "3",
                }
              ],
              desc: "杭州市装配监管平台",
              id: "146",
              pid: "145",
              project_id: "7",
              type_id: "2",
            }
          ],
          desc: "项目分解",
          id: "145",
          pid: "0",
          project_id: "7",
          type_id: "1",
        }
      ],
      defaultProps: {
        children: 'childrens',
        label: 'desc'
      },
      projectVisible: false,//项目分解弹窗
      menuNo: {},
    };
  },
  methods: {
    //穿梭框
    handleChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    //鼠标滑过“楼层”触发的事件
    onp (id, point) {

    },
    //关联图纸事件
    relativePic () {
      this.projectVisible = true
    },
    //树形图点击节点事件
    handleNodeClick (data) {

    },
    oncup () {

    },
    onitem () {

    },
    onresult () {

    },
    //时间改变时触发的事件
    changeTime () {

    },
    //页码器改变时触发的事件
    handleSizeChange (val) {

    },
    //当前页面改变时触发的事件
    handleCurrentChange (val) {

    },
    // 获取菜单树数据
    // getMenuTree () {
    //   menuManageApi.getMenuTree({
    //   }).then(res => {
    //     console.log('treeA', res)
    //     if (res.code === 0) {
    //       this.menuTree = res.data
    //       this.$store.dispatch('setMenuTree', this.menuTree)
    //       window.localStorage.setItem('menuTree', JSON.stringify(this.menuTree))
    //     }
    //   })
    // },
    getTreeData () {
      projectDecomApi.getTreeData({
        params: {
          project_id: '1'
        }
      }).then(res => {
        console.log('projectTree', res)
        if (res.code === 0) {
          this.menuTree = res.data.wbs
          this.$store.dispatch('setMenuTree', this.menuTree)
          window.localStorage.setItem('menuTree', JSON.stringify(this.menuTree))
        }
      })
    }
  },
  created () {
    this.getTreeData()
    // this.getMenuTree()
    for (var i = 0; i < this.dw_work.length; i++) {
      this.objstyle.push({ "width": this.dw_work[i].floor_num * 89 + 'px', "float": 'left', "margin-right": 6 + 'px' })
    }
    //最后一根线的长度
    for (var i = 0; i < this.dx_work.length; i++) {
      this.objstyle1.push({ "width": this.dx_work[i].floor_num * 90 + 'px', "float": 'left', "margin-left": 0 + 'px' })
    }
    this.contentStyleObj.height = 30 * this.axis_y.length + 'px';

    //this.resolve_desc = '1#-1' + "<br>" + "<ul><li><span>检查点：</span>" + "<span>" + 0 + "</span>" + "</li>" + "<li><span>已检查：</span>" + "<span>" + 5 + "</span>" + "</li>" + "</li>" + "<li><span>不合格：</span>" + "<span>" + 2 + "</span>" + "</li>" + "</ul>";
  }
}
</script>
<style lang="scss" scoped>
#projectDecom {
  padding: 20px;
}
.mid-size {
  height: 80;
}
.col-3-style {
  text-align: right;
  padding: 0px !important;
  padding-left: 12px !important;
}
.mid-left-desc {
  margin-top: 50px;
}
.head-installed-old {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
.head-installed {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
/deep/ .head-box {
  padding-left: 0px;
  padding-right: 0px;
  height: 16px;
}
.onp-div-next {
  height: 520;
}
.col-pagi-style {
  margin: 20px 0px;
  text-align: center;
}
.col-table-top {
  min-height: 310px;
  margin-top: 20px;
  overflow: auto;
}
.space-col {
  border-top: 1px solid #e6e6e6;
  padding-left: 20px;
}
.col-lh-top {
  width: auto;
}
.p-style {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.onp-div {
  width: 1200px;
  margin-top: 42.5px;
}
.mid-right-slid {
  width: 1000px;
  height: auto;
  overflow: auto;
  box-shadow: -10px 10px 11px rgba(234, 237, 241, 1);
}
.no-install {
  background: rgba(234, 237, 241, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .no-install-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  padding-right: 0px !important;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  line-height: 16px;
}
.row-style {
  height: 100%;
  overflow: hidden;
}
.head-style {
  padding-right: 20px;
}
.mid-str-border {
  border-left: 1px solid #ececec;
}
.col-12-style {
  height: 49px;
  line-height: 40px;
}
.col-10-style {
  margin-top: 11px;
  float: right;
}
.col-install {
  background: rgba(250, 173, 20, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .col-install-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  padding-right: 0 !important;
  line-height: 16px;
}
.col-success {
  background: rgba(24, 144, 255, 1);
  display: block;
  width: 16px;
  height: 16px;
}
/deep/ .col-success-next {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  padding-right: 0px !important;
  color: rgba(128, 128, 128, 1);
  float: left;
  height: 16px;
  line-height: 16px;
  padding-right: 0px;
}
.div-style {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 15px;
  padding-left: 8px;
}
.div-style-next {
  width: 30px;
  height: auto;
  margin-right: 20px;
}
.div-ul {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.div-ul-li {
  margin-top: 11.58px;
  margin-bottom: 1px;
  text-align: center;
  width: 100%;
  height: 20px;
  float: none;
  list-style: none;
}
.col-ul-li {
  float: left;
  width: 33.3%;
}
/deep/ .el-pagination__jump {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/ .el-pager li {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/ .el-pagination__total {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/ .el-pagination button:disabled {
  height: 40px !important;
  line-height: 40px !important;
}
#projectDecom {
  .btnActive {
    border: 1px solid #000;
  }
  .mid-floor-tool {
    margin: 2px;
  }
  /deep/ .el-select .el-input__inner {
    cursor: pointer;
    height: 40px !important;
    padding-right: 35px;
  }

  /deep/ .happy-scroll-container {
    height: auto !important;
  }
  /deep/ .happy-scroll-container {
    overflow: auto;
    width: 800px !important;
    height: auto !important;
  }
  #lh1 {
    li {
      float: left;
      list-style: none;
      width: 165px;
      border-top: 1px solid rgba(133, 133, 133, 1);
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }
  .lh2 {
    li {
      float: left;
      list-style: none;
      height: 40px;
      margin-left: 5px;
      text-align: center;
      line-height: 40px;
      border-top: 1px solid rgba(50, 50, 50, 1);
    }
  }
  .mid-ul-back {
    transform: rotateX(180deg);
  }
  .mid-floor-size {
    li {
      margin-left: 5px;
      float: left;
      list-style: none;

      .mid-ul-size-more {
        text-align: center;
        li {
          margin-top: 10px;
          width: 80px;
          height: 20px;
          float: none;
          list-style: none;
          text-align: center;
          cursor: pointer;
        }
        li:active {
          border: 1px solid rgba(51, 51, 51, 1);
          width: 78px;
          height: 18px;
        }
      }
    }
  }
  .tree_num {
    li {
      margin-top: 10px !important;
      text-align: right;
      height: 20px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 20px;
      font-size: 14px;
    }
  }
  .downla {
    position: relative;
    height: 312px;
    overflow: auto;
    /deep/
      .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: #e6f7ff;
    }
    /deep/ .el-tree-node__content:hover {
      background-color: #e6f7ff;
    }

    .mid-tree-style {
      font-size: 20px;
      position: absolute;
      top: 0px;
      z-index: 10;
      width: 100%;
    }
  }
  /deep/ .el-form-item {
    margin-bottom: 40px !important;
  }
}
</style>

